<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>xss演示</title>
</head>
<body>
    <h1>xss演示</h1>

    <p style="color: deeppink">反射型</p>

    <h4 style="color: red">演示1</h4>
    <input name="inp" placeholder="请输入你的内容" />
    <input type="button" value="提交输入内容" onclick="handleSubmit()">

    <br />
    <br />
    <br />



    <span>这里将显示服务端的内容(客户端给什么就返回什么 脚本script iframe等)</span>
    <div id="xssContent"></div>

    <br />

    <h4 style="color: red">演示2</h4>
    <input name="search" placeholder="请输入你的搜索内容" />
    <input type="button" value="提交搜索内容" onclick="handleSearchSubmit()">

    <br />
    <br />
    <br />

    <span>搜索的内容显示</span>
    <div id="xssSearchContent"></div>


    <p style="color: deeppink">存储型</p>
    <input name="comment" placeholder="请输入你的评论内容" />
    <input type="button" value="提交评论" onclick="handleSubmitComment()">

    <div>
        <h2>评论列表</h2>
        <ul id="cmtList">

        </ul>
    </div>
    <button type="button" onclick="location.href='/app/login'">去登录页</button>
    <button type="button" onclick="location.href='/app/register'">去注册页</button>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>

        $(function () {
            // 获取评论列表
            getComments()
        })

        function getComments() {
            console.log('---get comments---')
            $.ajax({
                type:'get',
                url: '/app/comments/',
                success: function (res) {
                    console.log(res)
                    if (res && res.code === 0) {
                        if (res.data.length) {
                            let fragment = document.createDocumentFragment()
                            res.data.forEach(item => {
                                 const li = document.createElement('li')
                                 li.innerHTML = item.content
                                 fragment.appendChild(li)
                            })
                            $('#cmtList').html(fragment)
                        }
                    }
                },
                error: function (err) {
                    console.log(err)
                }
            })
        }

        function handleSubmitComment() {
            console.log('---submit comment---')
            const comment = $.trim($("input[name='comment']").val())
            if (!comment) return
            $.ajax({
                type:'POST',
                url: '/app/comments/',
                data: {
                    comment,
                },
                success: function (res) {
                    console.log(res)
                    if (res && res.code === 0) {
                        alert('评论成功')
                        $("input[name='comment']").val('')
                        getComments()
                    }
                },
                error: function (err) {
                    console.log(err)
                }
            })
        }

        function handleSubmit() {
            const value = $("input[name='inp']").val()
            if (!value) return
            $.ajax({
                type: 'POST',
                url: '/app/xss/',
                data: {
                    inp: value
                },
                dataType: 'json',
                success: function (res) {
                   $('#xssContent').html(res.result)
                },
                error: function (err) {
                    console.log(err)
                }
            })
        }

        function handleSearchSubmit() {
            const value = $("input[name='search']").val()
            if (!value) return
            $.ajax({
                type: 'get',
                url: '/app/xss/',
                data: {
                    s: value
                },
                {#dataType: 'json',#}
                success: function (res) {
                    if (res ) {
                        $('#xssSearchContent').html(res)
                    }
                },
                error: function (err) {
                    console.log(err)
                }
            })
        }
    </script>
</body>
</html>